<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .w{
          width: 700px;
          height: 260px;
          margin: 50px auto;   
          /* background-color: rgb(221, 221, 221); */
    }
    .q{
        width: 100%;
        height: 50px;
        background-color: rgb(227, 228, 227);
        display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    }
    .cur {
    width: 70px;
    height: 83%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
    .cur_img{
        width: 10px;
        height: 10px;
        background-image: url(./img/btn_cartoon.gif);
        background-position: 0 207px;
    }
    .but {
    height: 100%;
    width: 60px;
    display: flex;
    align-items: center;
}
    .but_l {
    width: 30px;
    height: 20px;
    background-image: url(./img/btn_cartoon.gif);
    background-position: 0 23px;
}

 .but_l:hover {
     background-position: 0 123px;
 }
.but_r {
    width: 30px;
    height: 20px;
    background-image: url(./img/btn_cartoon.gif);
    background-position: -30px 23px;
}
.but_r:hover {
    background-position: -30px 123px;
}
.white{
    background-position: 0 307px;
}
.d{
    width: 700px;
    overflow: hidden;
}
.e{
    /* width: 700px; */
    height: 200px;
    /* background-color: yellow; */
    display: flex;
    /* justify-content: space-around; */
    /* align-items: center; */
    overflow: hidden;
    transition: all 1s linear;
}
.r{
    width: 190px;
    height: 200px;
    padding: 13px;
}
.r img{
    width: 150px;
}
p{
margin-top: 10px;
}
    </style>
</head>
<body>
    <div class="w">
        <div class="q">
            <span>卡通动画</span>
            <div class="cur">
                <div class="cur_img white"></div>
                <div class="cur_img"></div>
                <div class="cur_img"></div>
                <div class="cur_img"></div>
            </div>
            <div class="but">
                <div class="but_l">

                </div>
                <div class="but_r"></div>
            </div>
            <span>更多&gt;&gt;</span>
        </div>
        <div class="d">
            <div class="e">
                <div class="r">
                    <img src="./img/01.jpg" alt="">
                    <p>海贼王</p>
                    <p>播放：<i>28,276</i></p>
                </div>
                <div class="r">
                    <img src="./img/01.jpg" alt="">
                    <p>海贼王</p>
                    <p>播放：<i>28,276</i></p>
                </div>
                <div class="r">
                    <img src="./img/01.jpg" alt="">
                    <p>海贼王</p>
                    <p>播放：<i>28,276</i></p>
                </div>
                <div class="r">
                    <img src="./img/01.jpg" alt="">
                    <p>海贼王</p>
                    <p>播放：<i>28,276</i></p>
                </div>
                <div class="r">
                    <img src="./img/04.jpg" alt="">
                    <p>七龙珠</p>
                    <p>播放：<i>28,988</i></p>
                </div>
                <div class="r">
                    <img src="./img/04.jpg" alt="">
                    <p>七龙珠</p>
                    <p>播放：<i>28,988</i></p>
                </div>
                <div class="r">
                    <img src="./img/04.jpg" alt="">
                    <p>七龙珠</p>
                    <p>播放：<i>28,988</i></p>
                </div>
                <div class="r">
                    <img src="./img/04.jpg" alt="">
                    <p>七龙珠</p>
                    <p>播放：<i>28,988</i></p>
                </div>
                <div class="r">
                    <img src="./img/03.jpg" alt="">
                    <p>火影忍者</p>
                    <p>播放：<i>27,988</i></p>
                </div>
                <div class="r">
                    <img src="./img/03.jpg" alt="">
                    <p>火影忍者</p>
                    <p>播放：<i>27,988</i></p>
                </div>
                <div class="r">
                    <img src="./img/03.jpg" alt="">
                    <p>火影忍者</p>
                    <p>播放：<i>27,988</i></p>
                </div>
                <div class="r">
                    <img src="./img/03.jpg" alt="">
                    <p>火影忍者</p>
                    <p>播放：<i>27,988</i></p>
                </div>
                <div class="r">
                    <img src="./img/02.jpg" alt="">
                    <p>哆啦A梦</p>
                    <p>播放：<i>27,588</i></p>
                </div>
                <div class="r">
                    <img src="./img/02.jpg" alt="">
                    <p>哆啦A梦</p>
                    <p>播放：<i>27,588</i></p>
                </div>
                <div class="r">
                    <img src="./img/02.jpg" alt="">
                    <p>哆啦A梦</p>
                    <p>播放：<i>27,588</i></p>
                </div>
                <div class="r">
                    <img src="./img/02.jpg" alt="">
                    <p>哆啦A梦</p>
                    <p>播放：<i>27,588</i></p>
                </div>
            </div>
        </div>
       
    </div>
    <script>
        var e = document.querySelector(".e");
        var cur_imgs = document.querySelectorAll(".cur_img");
        var but_l = document.querySelector(".but_l");
        var but_r = document.querySelector(".but_r");
    
        var num = -704;
        var cishu = 0;
    
        // 下一个
        function next() {
            cishu++;
            if (cishu >= 4) {
                cishu = 0;
            }
            show();
        }
        // 上一个
        function prev() {
            cishu--;
            if (cishu <= -1) {
                cishu = 3;
            }
            show();
        }
 
        function show() {
            for (var i = 0; i < cur_imgs.length; i++) {
                cur_imgs[i].className = 'cur_img';
            }
            cur_imgs[cishu].classList.add('white');
            e.style.marginLeft = cishu * num + 'px';
        }
        // 自动轮播
        var timer = setInterval(next, 2000);
        // 点击下一个
        but_r.onclick = next;
        but_l.onclick = prev;
        // 鼠标进入停止
        e.onmouseover = function () {
            clearInterval(timer);
            timer = null;
        }
        // 鼠标移出开始
        e.onmouseout = function () {
            timer = setInterval(next, 2000);
        }
        // 点击指示灯切换
        for (var i = 0; i < cur_imgs.length; i++) {
            cur_imgs[i].index = i;
            cur_imgs[i].onclick = function () {
                console.log(this.index);
                cishu = this.index;
                show();
            }
        }
    
    </script>
</body>
</html>